<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title th:text="${question.title+'_树洞社区'}"></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <link rel="stylesheet" th:href="@{/css/community.css}">
    <link rel="stylesheet" th:href="@{/css/editormd.preview.min.css}">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1654155_pdkxw2wuoy.css">
    <script th:src="@{/js/jquery-3.4.1.min.js}"></script>
    <script th:src="@{/layui/layui.js}" type="application/javascript"></script>
    <script th:src="@{/js/moment.js}"></script>
    <script th:src="@{/js/comment.js}"></script>
    <script th:src="@{/js/editormd.js}" type="application/javascript"></script>
    <script th:src="@{/js/lib/marked.min.js}"></script>
    <script th:src="@{/js/lib/prettify.min.js}"></script>
    <script type="application/javascript">
        layui.use('element',function () {
            var element = layui.element;
        });

        function search() {
            layui.use('layer',function () {
                var layer = layui.layer;
                layer.open({
                    type: 1,
                    area:'500px',
                    title: false,
                    closeBtn: 0,
                    shadeClose: true,
                    skin: 'tree-layer-search',
                    content: '<form action="/"><input autocomplete="off" placeholder="搜索内容，回车跳转" type="text" name="search"></form>'
                });
            });
        }

        var index;
        function collectionDialog() {
            layui.use(['layer','form'],function () {
                var form = layui.form;
                var layer = layui.layer;
                if($("#bookMark .layui-form-item").children().length != 1){
                    index = layer.open({
                        type: 1,
                        title:'收藏',
                        skin: 'openBookMark',
                        area: ['420px', 'auto'], //宽高
                        content: $('#bookMark')
                    });
                }else{
                    var questionId = $("#question_id").val();
                    var collectionStatus;
                    if($("#detail-bookMark").children("span:last").hasClass("collected")){
                        collectionStatus = 1;
                    }else{
                        collectionStatus = 0;
                    }
                    $.ajax({
                        type:"post",
                        url:"/bookMark/getBookMark",
                        contentType:"application/json",
                        data: JSON.stringify({
                            "questionId":questionId,
                            "collectionStatus":collectionStatus
                        }),
                        success:function (result) {
                            if(result.code == 200){
                                if(result.data != null){
                                    var bookMarkBody = $("<div/>",{
                                        "class":"bookMark-checkbox"
                                    });
                                    $.each(result.data.reverse(),function (index, bookMark) {
                                        var inputElement = $("<input/>",{
                                            type:"checkbox",
                                            name:"bookmarkItem",
                                            title:bookMark.isPrivate == true?'(私密) '+bookMark.name:bookMark.name,
                                            value:bookMark.id,
                                            checked:bookMark.collected == true?true:false
                                        });
                                        bookMarkBody.append(inputElement);
                                    });
                                    $("#bookMark .layui-form-item").append(bookMarkBody);
                                }
                                form.render('checkbox');
                                index = layer.open({
                                    type: 1,
                                    title:'收藏',
                                    skin: 'openBookMark',
                                    area: ['420px', 'auto'], //宽高
                                    content: $('#bookMark')
                                });
                            }else{
                                layer.confirm(result.message, {
                                    btn: ['确定','取消'] //按钮
                                }, function(index){
                                    window.open("/login");
                                    window.localStorage.setItem("closable",true);
                                    layer.close(index);
                                });
                            }
                        },
                        dataType:"json"
                    });
                }
            });
        }

        //打开新增收藏夹对话框
        var index2;
        function addBookMarkDialog() {
            layui.use(['layer','form'],function () {
                var form = layui.form;
                var layer = layui.layer;
                index2 = layer.open({
                    type: 1,
                    title:'创建收藏夹',
                    skin: 'openAvatar',
                    area: ['420px', 'auto'], //宽高
                    content: $('#addBookMark')
                });
                closeLayer();
            });
        }

        //关闭收藏对话框
        function closeLayer() {
            layer.close(index);
        }

        function closeLayer2() {
            layer.close(index2);
        }

        function addBookMark() {
            layui.use(['layer','form'],function () {
                var form = layui.form;
                var layer = layui.layer;
                var name = $("#name").val();
                var description = $("#description").val();
                var isPrivate = $("input[name='isPrivate']:checked").val();
                if (!name) {
                    layer.msg("请输入收藏夹名称");
                }else if(name.length > 32){
                    layer.msg("名称最多输入32个字");
                }else if(description.length > 256){
                    layer.msg("描述最多输入256个字");
                }else{
                    $.ajax({
                        type:"post",
                        url:"/bookMark/addBookMark",
                        contentType:"application/json",
                        data:JSON.stringify({
                            "name":name,
                            "description":description,
                            "isPrivate":isPrivate == 1?true:false
                        }),
                        success:function (result) {
                            if(result.code == 200){
                                var inputElement = $("<input/>",{
                                    type:"checkbox",
                                    name:"bookmarkItem",
                                    title:isPrivate == 1?'(私密) '+name:name,
                                    value:result.data
                                });
                                $(".bookMark-checkbox").prepend(inputElement);
                                form.render('checkbox');
                                $("#name").val("");
                                $("#description").val("");
                                collectionDialog();
                                closeLayer2();
                            }else{
                                layer.msg(result.message);
                            }
                        },
                        dataType:"json"
                    });
                }
            });
        }

        function collection() {
            layui.use('layer',function () {
                var layer = layui.layer;
                var questionId = $("#question_id").val();
                var folderId =[];
                $("input[name='bookmarkItem']:checked").each(function(){
                    folderId.push($(this).val());
                });
                if(!$("#detail-bookMark").children("span:last").hasClass("collected")){
                    if($("#bookMark .bookMark-checkbox").children().length == 0){
                        layer.msg("请先创建收藏夹");
                    }else if(folderId.length == 0){
                        layer.msg("请选择收藏夹");
                    }else{
                        $.ajax({
                            type:"post",
                            url:"/collection/addCollection",
                            contentType:"application/json",
                            data:JSON.stringify({
                                "questionId":questionId,
                                "folderId":folderId.join("-")
                            }),
                            success:function (result) {
                                if(result.code == 200){
                                    window.location.reload();
                                }
                            },
                            dataType:"json"
                        });
                    }
                }else{
                    var folderIds;
                    if(folderId.length == 0){
                        folderIds = "取消收藏";
                    }else{
                        folderIds = folderId.join("-");
                    }
                    $.ajax({
                        type:"post",
                        url:"/collection/updateCollection",
                        contentType:"application/json",
                        data:JSON.stringify({
                            "questionId":questionId,
                            "folderId":folderIds
                        }),
                        success:function (result) {
                            if(result.code == 200){
                                window.location.reload();
                            }
                        },
                        dataType:"json"
                    });
                }
            });
        }

        function deleteQu() {
            layui.use('layer',function () {
                var layer = layui.layer;
                var questionId = $("#question_id").val();
                var authorId = $("#authorId").val();
                layer.confirm('确定要删除帖子吗（所获积分也将删除）？', {
                    btn: ['确定','取消'] //按钮
                }, function(index){
                    $.ajax({
                        type:"post",
                        url:"/question/deleteQu",
                        contentType:"application/json",
                        data:JSON.stringify({
                            "questionId":questionId,
                            "authorId":authorId
                        }),
                        success:function (result) {
                            if(result.code == 200){
                                window.location.href = '/';
                            }
                        },
                        dataType:"json"
                    });
                });
            });
        }

        function deleteComment(value) {
            layui.use('layer',function () {
                var layer = layui.layer;
                var authorId = $("#authorId").val();
                layer.confirm('确定要删除评论吗（所获积分和所有回复也将删除）？', {
                    btn: ['确定','取消'] //按钮
                }, function(index){
                    $.ajax({
                        type:"post",
                        url:"/comment/deleteComment",
                        contentType:"application/json",
                        data:JSON.stringify({
                            "commentId":value,
                            "authorId":authorId
                        }),
                        success:function (result) {
                            if(result.code == 200){
                                window.location.reload();
                            }
                        },
                        dataType:"json"
                    });
                });
            });
        }

        function deleteComment2(value,parentId) {
            layui.use('layer',function () {
                var layer = layui.layer;
                var authorId = $("#authorId").val();
                layer.confirm('确定要删除回复吗（所获积分也将删除）？', {
                    btn: ['确定','取消'] //按钮
                }, function(index){
                    $.ajax({
                        type:"post",
                        url:"/comment/deleteComment2",
                        contentType:"application/json",
                        data:JSON.stringify({
                            "commentId":value,
                            "parentId":parentId,
                            "authorId":authorId
                        }),
                        success:function (result) {
                            if(result.code == 200){
                                window.location.reload();
                            }
                        },
                        dataType:"json"
                    });
                });
            });
        }

        function essence() {
            var questionId = $("#question_id").val();
            var essence;
            if($(".tree-admin-box span:last").hasClass("applyFor")){
                essence = false;
            }else{
                essence = true;
            }
            $.ajax({
                type:"post",
                url:"/question/essence",
                contentType:"application/json",
                data:JSON.stringify({
                    "id":questionId,
                    "essence":essence
                }),
                success:function (result) {
                    if(result.code == 200){
                        window.location.reload();
                    }
                },
                dataType:"json"
            });
        }

        function quTop() {
            var questionId = $("#question_id").val();
            var isTop;
            if($(".tree-admin-box span").eq(1).hasClass("applyFor")){
                isTop = false;
            }else{
                isTop = true;
            }
            $.ajax({
                type:"post",
                url:"/question/quTop",
                contentType:"application/json",
                data:JSON.stringify({
                    "id":questionId,
                    "isTop":isTop
                }),
                success:function (result) {
                    if(result.code == 200){
                        window.location.reload();
                    }
                },
                dataType:"json"
            });
        }
    </script>
</head>
<body>
<div th:replace="navigation :: nav"></div>
<div class="layui-hide-xs"><div th:replace="navTwo :: navTwo"></div></div>
<div class="layui-container">
    <div class="layui-row layui-col-space15">
        <!--左边主要内容-->
        <div class="layui-col-md8 content detail">
            <!--正文-->
            <div class="tree-panel detail-box">
                <h1 th:text="${question.title}"></h1>
                <div class="tree-detail-info">
                    <span class="layui-badge layui-bg-green" th:text="${question.typeName}"></span>
                    <span class="layui-badge layui-bg-orange" th:if="${question.isTop == true}">置顶</span>
                    <span class="layui-badge" th:if="${question.essence == true}">精贴</span>
                    <div class="tree-admin-box" th:if="${session.user!=null && (session.user.id==question.user.id || session.user.type == 2)}">
                        <span class="layui-btn layui-btn-xs" onclick="deleteQu()">删除</span>
                        <span class="layui-btn layui-btn-xs" onclick="quTop()" th:if="${session.user.type == 2}"
                              th:classappend="${question.isTop == true?'applyFor':''}"
                              th:text="${question.isTop == true?'取消置顶':'置顶'}"></span>
                        <span class="layui-btn layui-btn-xs" onclick="essence()" th:if="${session.user.type == 2}"
                              th:classappend="${question.essence == true?'applyFor':''}"
                              th:text="${question.essence == true?'取消加精':'加精'}"></span>
                    </div>
                    <span class="tree-list-nums">
                        <span th:id="${'likeQu-'+question.id}" th:data-id="${question.id}" style="cursor: pointer;"
                           onclick="like_question(this)" th:class="${question.likeStatus == 1?'liked':''}">
                            <i class="iconfont icon-zan2" title="点赞" style="padding-right: 0px;margin-right: -2px;"></i>
                            <span th:text="${question.likeCount}" th:id="${'likeCountQu-'+question.id}"></span>
                        </span>
                        <i class="iconfont icon-liulan2" title="浏览" style="font-size: 22px;top: 3px;margin-right: 1px;"></i><span th:text="${question.viewCount}"></span>
                    </span>
                </div>
                <div class="detail-about">
                    <a class="tree-avatar" th:href="@{'/user/'+${question.user.id}}">
                        <img th:src="${question.user.avatarUrl}">
                    </a>
                    <div class="tree-detail-user" style="white-space: inherit;">
                        <a th:href="@{'/user/'+${question.user.id}}" class="tree-link">
                            <cite th:text="${question.user.nickName}"></cite>
                            <i class="layui-badge tree-badge-vip layui-bg-gray" th:text="${'LV'+question.user.grade}"></i>
                        </a>
                        <span th:text="${#dates.format(question.gmtModified,'yyyy-MM-dd HH:mm')}"></span>更新
                    </div>
                    <div class="detail-hits" id="detail-bookMark">
<!--                        <span style="padding-right: 10px; color: #FF7200">-->
<!--                            有任何问题点击QQ号加站长询问：<a target="_blank" th:href="@{'tencent://Message'(Uin=2435663184,websiteName='local.edu.com:8888=',Menu='yes')}">2435663184</a>-->
<!--                        </span>-->
                        <span class="layui-btn layui-btn-xs jie-admin" th:if="${session.user!=null && question.typeName == '公告' && session.user.type == 2}">
                            <a th:href="@{'/admin/notice/'+${question.id}}" style="margin-left: -5px;">
                                <i class="layui-icon layui-icon-edit"></i>编辑
                            </a>
                        </span>
                        <span class="layui-btn layui-btn-xs jie-admin" th:if="${session.user!=null && question.typeName != '公告' && session.user.id==question.user.id}">
                            <a th:href="@{'/publish/'+${question.id}}" style="margin-left: -5px;">
                                <i class="layui-icon layui-icon-edit"></i>编辑
                            </a>
                        </span>
                        <span onclick="collectionDialog()" class="layui-btn layui-btn-xs layui-btn-warm" th:classappend="${collectionStatus == 1?'collected':''}">
                            <i class="layui-icon layui-icon-star"></i><span th:text="${collectionStatus == 1?'已收藏('+question.collectionCount+')':'收藏('+question.collectionCount+')'}"></span>
                        </span>
                    </div>
                </div>
                <div style="margin-top: 20px;margin-bottom: 20px" class="layui-text layui-table" id="question-view">
                    <textarea style="display: none" th:text="${question.description}"></textarea>
                </div>
                <script type="text/javascript">
                    $(function () {
                        editormd.markdownToHTML("question-view",{});
                    });
                </script>
                <div style="margin-top: 10px">
                    相关标签：
                    <span class="layui-badge-rim" th:each="tag:${question.tag.split(',')}" style="margin-right: 3px;margin-top: 3px">
                        <a th:href="@{/(page=1,tag=${tag})}" th:text="${tag}"></a>
                    </span>
                </div>
            </div>
            <!--回复-->
            <div class="tree-panel detail-box btn-hover">
                <fieldset class="layui-elem-field layui-field-title" style="text-align: center;">
                    <legend th:text="${question.commentCount+'个回复'}"></legend>
                </fieldset>
                <div class="comments">
                    <ul class="jieda" id="jieda">
                        <li id="comment-body-224" class="jieda-daan" th:each="comment : ${comments}">
                            <div class="detail-about detail-about-reply">
                                <a class="tree-avatar" th:href="@{'/user/'+${comment.user.id}}">
                                    <img th:src="${comment.user.avatarUrl}">
                                </a>
                                <div class="tree-detail-user">
                                    <a th:href="@{'/user/'+${comment.user.id}}" class="tree-link">
                                        <cite th:text="${comment.user.nickName}"></cite>
                                        <i class="layui-badge tree-badge-vip layui-bg-gray" th:text="${'LV'+comment.user.grade}"></i>
                                    </a>
                                </div>
                                <div class="detail-hits">
                                    <span th:text="${#dates.format(comment.gmtCreate,'yyyy-MM-dd HH:mm')}"></span>
                                </div>
                            </div>
                            <div class="detail-body jieda-body" th:text="${comment.content}"></div>
                            <div class="jieda-reply">
                                <span class="jieda-zan" th:id="${'likeCom-'+comment.id}" th:data-id="${comment.id}"
                                      onclick="like_comment(this)" th:class="${comment.likeStatus == 1?'liked':''}">
                                    <i class="iconfont icon-zan2"></i>
                                    <em th:text="${comment.likeCount}" th:id="${'likeCountCom-'+comment.id}"></em>
                                </span>
                                <span class="icon" th:data-id="${comment.id}" onclick="collapseComments(this)">
                                    <i class="iconfont icon-huifu"></i>
                                    <em th:text="${comment.commentCount}"></em>
                                </span>
                                <div class="jieda-admin" th:if="${session.user!=null && (session.user.id==comment.user.id || session.user.id==question.creator || session.user.type == 2)}">
                                    <span type="del" style="padding-right: 10px" th:onclick="'deleteComment('+${comment.id}+')'">删除</span>
                                </div>
                            </div>
                            <!--二级评论-->
                            <div class="sub-comments layui-hide" th:id="${'comment-'+comment.id}">
                                <div>
                                    <input type="text" class="form-control layui-input" placeholder="评论一下..." th:id="'input-'+${comment.id}">
                                    <button type="button" class="layui-btn  rightbtn" onclick="comment(this)"
                                            th:id="'btn-'+${comment.id}" th:data-parentid="${comment.id}" th:data-targetid="${comment.id}" th:data-type="2">回复</button>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <!--回复输入框-->
                <div class="layui-form layui-form-pane">
                    <input type="hidden" id="question_id" th:value="${question.id}">
                    <input type="hidden" id="authorId" th:value="${question.user.id}">
                    <div class="layui-form-item layui-form-text">
                        <div class="layui-input-block">
                            <textarea id="questionComment" class="layui-textarea" rows="6" placeholder="我来说两句..."></textarea>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <button type="button" class="layui-btn" onclick="post()">评论</button>
                    </div>
                </div>
            </div>
        </div>
        <!--右边信息块-->
        <div class="layui-col-md4">
            <!--相关帖子-->
            <dl class="tree-panel tree-list-one" th:if="${relatedQuestions.size() != 0}">
                <dt class="tree-panel-title">相关帖子</dt>
                <dd th:each="related:${relatedQuestions}">
                    <a th:href="@{'/question/'+ ${related.id}}" th:text="${related.title}"></a>
                    <span>
                        <i class="iconfont icon-pinglun1" style="margin-right: 2px;top: 1px;"></i><span th:text="${related.commentCount}"></span>
                    </span>
                </dd>
            </dl>
            <!--微信号-->
            <div class="tree-panel">
                <div class="tree-panel-title">紫荆华农</div>
                <div class="tree-panel-main">
                    <img src="/images/huanong.png" style="max-width: 100%;"/>
                </div>
            </div>
            <!--友情链接-->
            <div class="tree-panel tree-link">
                <h3 class="tree-panel-title">友情链接</h3>
                <dl class="tree-panel-main">
                    <dl class="tree-panel-main">
                        <dd><a href="#">树洞社区</a></dd>
                        <dd><a href="https://blog.csdn.net/weixin_43952736?spm=1000.2115.3001.5343">呓语dd</a></dd>
                        <!--                    <dd><a th:href="@{'tencent://Message'(Uin=2435663184,websiteName='local.edu.com:8888=',Menu='yes')}" target="_blank">联系站长</a></dd>-->
                        <!--                    <dd><a href="https://github.com/shaozihang/community">社区源码</a></dd>-->
                        <!--                    <dd><a th:href="@{'tencent://Message'(Uin=2435663184,websiteName='local.edu.com:8888=',Menu='yes')}" target="_blank" class="tree-link">申请友链</a></dd>-->
                    </dl>
                </dl>
            </div>
        </div>
    </div>
</div>
<div th:replace="footer :: foot"></div>
<div id="bookMark" style="padding: 1rem;display: none">
    <div class="bookMark-content layui-form" style="margin-bottom: 15px;">
        <div class="layui-form-item">
            <label style="display: inline-block;margin-bottom: 10px;">添加到收藏夹：</label>
        </div>
        <a class="new-bookmark" style="cursor: pointer" onclick="addBookMarkDialog()">+ 创建收藏夹</a>
    </div>
    <div class="bookMark-footer">
        <button type="button" class="layui-btn layui-btn-primary" onclick="closeLayer()">取消</button>
        <button type="button" class="layui-btn" onclick="collection()">确定</button>
    </div>
</div>
<div id="addBookMark" style="padding: 1rem;display: none">
    <div class="bookMark-content layui-form" style="margin-bottom: 15px;">
        <div class="layui-form-item">
            <input type="text" id="name" placeholder="请输入收藏夹名称" autocomplete="off" maxlength="32" class="layui-input">
        </div>
        <div class="layui-form-item layui-form-text">
            <textarea id="description" placeholder="请输入描述" maxlength="256" class="layui-textarea"></textarea>
        </div>
        <div class="layui-form-item">
            <input type="radio" name="isPrivate" value="1" title="私密" checked>
            <input type="radio" name="isPrivate" value="0" title="公开">
        </div>
    </div>
    <div class="bookMark-footer">
        <button type="button" class="layui-btn layui-btn-primary" onclick="closeLayer2()">取消</button>
        <button type="button" class="layui-btn" onclick="addBookMark()">确定</button>
    </div>
</div>
</body>
</html>